import React, { Component } from 'react';
import {
    FormBinderWrapper as IceFormBinderWrapper,
    FormBinder as IceFormBinder,
    FormError as IceFormError,
} from '@icedesign/form-binder';
import CellEditor from '../EditableTable/CellEditor';
import './Demo.scss'
import { Table, Button, Input, Select, Grid, Dialog, Radio, CascaderSelect, Icon } from '@icedesign/base';
const { Row, Col } = Grid;
import Axios from 'axios';
import cookie from 'react-cookies'
const datass = [
    {
        "value": 1,
        "label": "创新投入能力",
        "iwLevel": "A",
        "iwSequence": "A1",
        "iwParentSeq": "0",
        "iwWeight": 0.1,
        "iwDescribe": "暂无指标描述",
        "iwNote": "备用",
        "children": [{
            "value": 2,
            "label": "创新经费投入",
            "iwLevel": "B",
            "iwSequence": "B1",
            "iwParentSeq": "A1",
            "iwWeight": 0.1,
            "iwDescribe": "暂无指标描述",
            "iwNote": "备用",
            "children": [{
                "value": 5,
                "label": "纵向科研项目经费占机构总收入的比重",
                "iwLevel": "C",
                "iwSequence": "C1",
                "iwParentSeq": "B1",
                "iwWeight": 0.1,
                "iwDescribe": "反映基础理论研究经费的投入强度",
                "iwNote": "备用"
            }, {
                "value": 6,
                "label": "横向科研项目经费占机构总收入的比重",
                "iwLevel": "C",
                "iwSequence": "C2",
                "iwParentSeq": "B1",
                "iwWeight": 0.1,
                "iwDescribe": "反映应用开发研究经费的投入强度",
                "iwNote": "备用"
            }]
        }, {
            "value": 3,
            "label": "创新人力投入",
            "iwLevel": "B",
            "iwSequence": "B2",
            "iwParentSeq": "A1",
            "iwWeight": 0.1,
            "iwDescribe": "暂无指标描述",
            "iwNote": "备用",
            "children": [{
                "value": 7,
                "label": "科研人员占机构全部人员的比重",
                "iwLevel": "C",
                "iwSequence": "C3",
                "iwParentSeq": "B2",
                "iwWeight": 0.1,
                "iwDescribe": "反映科研人员的投入强度",
                "iwNote": "备用"
            }, {
                "value": 8,
                "label": "高级职称科研人员占科研人员的比重",
                "iwLevel": "C",
                "iwSequence": "C4",
                "iwParentSeq": "B2",
                "iwWeight": 0.1,
                "iwDescribe": "反映高水平研发人员的投入强度",
                "iwNote": "备用"
            }, {
                "value": 9,
                "label": "机构人员中拥有博士学位人员的所占比重",
                "iwLevel": "C",
                "iwSequence": "C5",
                "iwParentSeq": "B2",
                "iwWeight": 0.1,
                "iwDescribe": "反映机构内部人员的知识结构",
                "iwNote": "备用"
            }]
        }, {
            "value": 4,
            "label": "科研平台投入",
            "iwLevel": "B",
            "iwSequence": "B3",
            "iwParentSeq": "A1",
            "iwWeight": 0.1,
            "iwDescribe": "暂无指标描述",
            "iwNote": "备用",
            "children": [{
                "value": 10,
                "label": "研发机构横向经费占机构科研经费的比重",
                "iwLevel": "C",
                "iwSequence": "C6",
                "iwParentSeq": "B3",
                "iwWeight": 0.1,
                "iwDescribe": "反映机构对研发机构的资源投入状况",
                "iwNote": "备用"
            }, {
                "value": 11,
                "label": "研发机构科研人员占机构科研人员的比重",
                "iwLevel": "C",
                "iwSequence": "C7",
                "iwParentSeq": "B3",
                "iwWeight": 0.1,
                "iwDescribe": "反映机构对研发机构的能力汇聚状况",
                "iwNote": "备用"
            }]
        }]
    }


]
const displayRender = labels => {
    return labels.reduce((ret, label, index) => {
        ret.push(
            <span className="label-ellipsis" title={label}>
                {label}
            </span>
        );
        if (index < labels.length - 1) {
            ret.push(<span className="label-separator"> / </span>);
        }
        return ret;
    }, []);
};
export default class Demo extends Component {

    constructor(props) {
        super(props);

        this.state = {
            data: {},
            value: [],
            dataSource: [],
        };
    }
    handleCheck = () => {
        this.setState({
            changeOnSelect: !this.state.changeOnSelect,
            value: null
        });
    }
    onInputChange = (e) => {
        try {
            const { _data } = this.state
            _data.number = parseInt(e);
            this.setState({
                _data
            })
        } catch (error) {
            //TODO
            console.log("sss")
        }

    }
    handleChange = (value, data, extra) => {
        console.log(value, data, extra);
        this.setState({
            data
        })
        const _data = {}
        _data.iwId = data.value
        _data.iwName = data.label
        delete data.value
        delete data.label
        delete data.pos
        Object.assign(_data, data);
        this.setState({
            _data
        })
        this.state.value.push(_data);
    };
    renderOrder = (value, index) => {
        return <span>{index + 1}</span>;
    };

    addItem = () => {
        this.state.dataSource.push({
            todo: <CascaderSelect
                style={{ width: "480px" }}
                displayRender={displayRender}
                showItemCount="5"
                labelWidth="80"
                defaultValue="3431"
                dataSource={datass}
                onChange={this.handleChange}
            />
        });
        this.setState({
            dataSource: this.state.dataSource,
        });
        this.setState({
            value: this.state.value
        });
    };

    formChange = value => {
        console.log('value', value);
        this.setState({
            value
        });
    };

    changeItem = () => {
        let items = this.state.value.items;
        items[0].aaa = '有趣';
        this.setState({
            value: {
                ...this.state.value,
                items: items
            }
        });
    };
    send = () => {
        const indexsInfo = "sss"
        // const indexsInfo = this.state.value
        console.log("value", this.state.value)
        const baseurl = 'http://39.105.21.199:8989/IPEvaluation';
        const sessionid = cookie.load('sessionId');
        const weighturl = `${baseurl}/evaluateManage/adminAddEvaluate.do?sessionId=${sessionid}`

        const param = new URLSearchParams();
        param.append('indexsInfo', JSON.stringify(this.state.value, null, 2));
        Axios.post(weighturl, param)
            .then((response) => {
                console.log("send-->response", response)
                this.setState({
                    iw2: response.data.data
                })
                console.log(response.data.data)
            })
    }
    removeItem = (index) => {
        this.state.value.items.splice(index, 1);
        this.setState({
            value: this.state.value
        });
    }

    validateAllFormField = () => {
        this.refs.form.validateAll((errors, values) => {
            console.log('errors', errors, 'values', values);
        });
    };
    addline = () => {
        this.state.dataSource.push({
            todo: <CascaderSelect
                style={{ width: "480px" }}
                displayRender={displayRender}
                showItemCount="5"
                labelWidth="80"
                defaultValue="3431"
                dataSource={datass}
                onChange={this.handleChange}
            />
        });
        this.setState({
            dataSource: this.state.dataSource,
        });
    }

    deleteItem = (index) => {
        this.state.dataSource.splice(index, 1);
        delete this.state.value[index]
        this.state.value.splice(index, 1)
        this.setState({
            dataSource: this.state.dataSource,
        });
    };

    renderOperation = (value, index) => {
        return (
            <Button onClick={this.deleteItem.bind(this, index)} shape="text">
                删除
          </Button>
        );
    };
    renderInput = (value, index) => {
        return (
            <Input name="number" onChange={this.onInputChange} />
        );
    };

    changeDataSource = (index, valueKey, value) => {
        this.state.dataSource[index][valueKey] = value;
        this.setState({
            dataSource: this.state.dataSource,
        });
    };

    renderEditor = (valueKey, value, index, record) => {
        return (
            <CellEditor
                valueKey={valueKey}
                index={index}
                value={record[valueKey]}
                onChange={this.changeDataSource}
            />
        );
    };
    render() {
        return (
            <div>
                <div>
                    <Table dataSource={this.state.dataSource} hasBorder={false}>
                        <Table.Column width={80} title="顺序" cell={this.renderOrder} />
                        <Table.Column
                            width={240}
                            title="一级指标/二级指标/三级指标"
                            cell={this.renderEditor.bind(this, 'todo')}
                        />
                        <Table.Column title="数据" width={80} cell={this.renderInput} />
                        <Table.Column title="操作" width={80} cell={this.renderOperation} />
                    </Table>
                </div>
                <IceFormBinderWrapper
                    value={this.state.value}
                    onChange={this.formChange}
                    ref="form"
                >
                    <div>
                        <div style={{ marginTop: 20 }}>
                            <span>请输入文章名称：</span>
                            <Table dataSource={this.state.dataSource} hasBorder={false}>
                                <div style={{ marginTop: 10 }}>
                                    {this.state.value.map((item, index) => {
                                        return (
                                            <Row key={index} style={{ marginTop: 5 }}>
                                                <Table.Column width={80} title="顺序" cell={this.renderOrder} />
                                                <Table.Column
                                                    width={240}
                                                    title="一级指标/二级指标/三级指标"
                                                    cell={this.renderEditor.bind(this, 'todo')}
                                                />
                                                <Table.Column title="操作" width={80} cell={this.renderOperation} />
                                            </Row>
                                        );
                                    })}

                                </div>
                            </Table>
                            <Button style={{ marginTop: 10 }} onClick={this.addItem}>新增一个 item，每一行第一个支持校验</Button>
                            <Button style={{ marginLeft: 10 }} onClick={this.validateAllFormField}>
                                校验整个表单
        </Button>
                            <Button type="primary" onClick={this.send}>发送</Button>

                        </div>
                    </div>
                </IceFormBinderWrapper>
                <div style={{ border: '1px solid #ccc', background: '#cacaca', marginTop: 20, padding: 10 }}>
                    <strong>当前表单数据：</strong>
                    <pre>{JSON.stringify(this.state.value, null, 2)}</pre>
                </div>
            </div>
        );
    }
}

const styles = {
    addNewItem: {
        background: '#F5F5F5',
        height: 32,
        lineHeight: '32px',
        marginTop: 20,
        cursor: 'pointer',
        textAlign: 'center',
    },
    submit: {
        background: '#3080fe',
        height: 32,
        lineHeight: '32px',
        marginTop: 50,
        cursor: 'pointer',
        textAlign: 'center',
        borderRadius: '6px',
        color: 'white',
        float: 'right',
    },
    formRow: {
        marginBottom: '18px',
    },
    formCol: {
        display: 'flex',
        alignItems: 'center',
        marginBottom: '20px',
    },
    label: {
        lineHeight: '28px',
        paddingRight: '10px',
    },
    icon: {
        width: '52px',
        height: '52px',
    },
    dialogContent: {
        // width: '640px',
        // height: '200px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
    },
    info: {
        marginTop: '10px',
        fontSize: '16px',
        textAlign: 'center',
    },
    extraInfo: {
        marginTop: '12px',
        fontSize: '12px',
        color: '#999999',
    },
    authList: {
        marginTop: '10px',
        fontSize: '12px',
        color: '#999999',
    },
    authItem: {
        marginTop: '5px',
    },
    authItemIcon: {
        color: '#2ECA9C',
        marginRight: '5px',
    },
    footer: {
        marginTop: '10px',
        marginBottom: '10px',
        textAlign: 'center',
    },
};
